<template>
  <div>
    <el-form :model="searchForm" inline>
      <el-form-item label="评论人">
        <el-input v-model="searchForm.name" placeholder="评论人" clearable></el-input>
      </el-form-item>
      <el-form-item label="评论状态">
        <el-select placeholder="选择评论状态" v-model="searchForm.commentStatus" clearable>
          <el-option :value="1" label="待审核"/>
          <el-option :value="2" label="已通过"/>
          <el-option :value="3" label="已拒绝"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select placeholder="选择状态" v-model="searchForm.status" clearable>
          <el-option :value="1" label="可用"/>
          <el-option :value="2" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item label="评论日期">
        <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList">查询</el-button>
      </el-form-item>
    </el-form>
    <CommentTable :data-list="dataList" :is-dialog="false" :page-info="pageInfo" @changeStatus="changeStatus"
                  @examComment="examComment" @deleteComment="deleteComment" @currentChange="currentChange"
                  @sizeChange="sizeChange"/>
    <CommentExam ref="commentExam" @closeDialog="getDataList"/>
  </div>
</template>

<script>
import CommentTable from '@/components/CommentTable.vue'
import CommentExam from '@/views/admin/comment/CommentExam.vue'

export default {
  name: 'CommentList',
  components: {
    CommentExam,
    CommentTable
  },
  props: { CommentTable },
  data () {
    return {
      searchForm: {
        name: '',
        status: '',
        commentStatus: '',
        commentTimeRange: ''
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      dataList: [],
      timeRange: []
    }
  },
  methods: {
    currentChange (value) {
      this.pageInfo.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.pageInfo.limit = value
      this.getDataList()
    },
    deleteComment (commentId) {
      this.$confirm(`确定删除编号[${commentId}]的数据吗？`, { type: 'info' }).then(() => {
        this.$http.delete(`admin/comment/delete/${commentId}`).then(() => {
          this.$alert('删除成功', { type: 'success' }).then(() => {
            this.getDataList()
          })
        })
      })
    },
    getDataList () {
      this.searchForm.applyTimeRange = this.timeRange?.toString()
      this.searchForm = {
        ...this.searchForm,
        ...this.pageInfo
      }
      this.$http.get('admin/comment/page', this.searchForm).then(data => {
        this.dataList = data.data.records
        this.pageInfo.page = data.data.current
        this.pageInfo.limit = data.data.size
        this.pageInfo.total = data.data.total
      })
    },
    changeStatus (obj) {
      this.$confirm(`确定更改编号[${obj.commentId}]的状态为[${obj.status === 1 ? '可用' : '禁用'}]吗？`).then(() => {
        this.$http.post('admin/comment/status', obj).then(() => {
          this.$message.success('更改状态成功')
          this.getDataList()
        })
      })
    },
    examComment (commentId) {
      this.$refs.commentExam.init(commentId)
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
